<template>
    <view class="grace-select-tags">
        <view
            class="grace-select-tag"
            :data-index="index"
            :style="
                'width:' +
                itemWidth +
                '; background:' +
                (item.checked ? selectedColor : bgColor) +
                '; font-size:' +
                fontSize +
                '; height:' +
                height +
                '; line-height:' +
                height +
                '; border-radius:' +
                borderRadius +
                '; color:' +
                (item.checked ? fontActiveColor : fontColor) +
                ';'
            "
            @tap.stop.prevent="graceSelectChange"
            v-for="(item, index) in tagsData"
            :key="index"
        >
            {{ item.name }}
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tagsData: []
        };
    },
    props: {
        itemWidth: {
            type: String,
            default: '200rpx'
        },
        type: {
            type: String,
            default: ''
        },
        items: {
            type: Array,
            default: () => []
        },
        fontSize: {
            type: String,
            default: '26rpx'
        },
        selectedColor: {
            type: String,
            default: '#3688FF'
        },
        bgColor: {
            type: String,
            default: '#F6F7F8'
        },
        height: {
            type: String,
            default: '68rpx'
        },
        borderRadius: {
            type: String,
            default: '10rpx'
        },
        fontColor: {
            type: String,
            default: '#323232'
        },
        fontActiveColor: {
            type: String,
            default: '#FFFFFF'
        },
        datas: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            if (this.items == null) {
                this.setData({
                    tagsData: []
                });
            } else {
                this.setData({
                    tagsData: this.items
                });
                this.initChange();
            }
            watch(this, {
                items: function (nv, ov) {
                    this.setData({
                        tagsData: nv
                    });
                    this.initChange();
                }
            });
        },

        initChange: function () {
            if (this.type == 'radio') {
                var selectVal = '';
                for (var i = 0; i < this.tagsData.length; i++) {
                    if (this.tagsData[i].checked) {
                        selectVal = this.tagsData[i].value;
                    }
                }
                //this.triggerEvent("change", [selectVal, this.data.datas]);
            } else {
                var sedRes = [];
                for (var i = 0; i < this.tagsData.length; i++) {
                    if (this.tagsData[i].checked) {
                        sedRes.push(this.tagsData[i].value);
                    }
                }
                //this.triggerEvent("change", [sedRes, this.data.datas]);
            }
        },

        graceSelectChange: function (index) {
            if (index.currentTarget) {
                index = index.currentTarget.dataset.index;
            }
            if (this.type == 'radio') {
                for (var i = 0; i < this.tagsData.length; i++) {
                    this.tagsData[i].checked = false;
                }
                this.tagsData[index].checked = true;
                this.setData({
                    tagsData: this.tagsData
                });
                this.$emit('change', {
                    detail: [this.tagsData[index].value, this.datas]
                });
            } else {
                if (this.tagsData[index].checked) {
                    this.tagsData[index].checked = false;
                } else {
                    this.tagsData[index].checked = true;
                }
                this.setData({
                    tagsData: this.tagsData
                });
                var sedRes = [];
                for (var i = 0; i < this.tagsData.length; i++) {
                    if (this.tagsData[i].checked) {
                        sedRes.push(this.tagsData[i].value);
                    }
                }
                this.$emit('change', {
                    detail: [sedRes, this.datas]
                });
            }
        },

        setItems: function (items) {
            this.setData({
                tagsData: items
            });
            this.initChange();
        },

        clearSelected: function () {
            var newData = [];
            for (let i = 0; i < this.tagsData.length; i++) {
                this.tagsData[i].checked = false;
                newData.push(this.tagsData[i]);
            }
            this.setData({
                tagsData: newData
            });
            if (this.type == 'radio') {
                this.$emit('change', {
                    detail: ['', this.datas]
                });
            } else {
                this.$emit('change', {
                    detail: [[], this.datas]
                });
            }
        },

        selectAll: function () {
            if (this.type == 'radio') {
                return;
            }
            var newData = [];
            var reDatas = [];
            for (let i = 0; i < this.tagsData.length; i++) {
                this.tagsData[i].checked = true;
                newData.push(this.tagsData[i]);
                reDatas.push(this.tagsData[i].value);
            }
            this.setData({
                tagsData: newData
            });
            this.$emit('change', {
                detail: [reDatas, this.datas]
            });
        }
    },
    created: function () {}
};
function defineReactive(data, key, val, fn) {
    Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get: function () {
            return val;
        },
        set: function (newVal) {
            if (newVal === val) {
                return;
            }
            if (fn) {
                fn(newVal);
            }
            val = newVal;
        }
    });
}
function watch(ctx, obj) {
    Object.keys(obj).forEach((key) => {
        defineReactive(ctx.data, key, ctx.data[key], function (value) {
            obj[key].call(ctx, value);
        });
    });
}
</script>
<style>
.grace-select-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.grace-select-tag {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 10rpx;
    font-size: 24rpx;
    border-radius: 8rpx;
}
.grace-checked {
    color: #ffffff;
}
</style>
